<!--
 * Copyright © 2023
 * @Author: zhangxiang
 * @Date: 2023-05-11 11:00:39
 * @LastEditors: zhangxiang
 * @LastEditTime: 2023-09-21 15:28:29
 * @Description:
 *
-->

<template>
  <MyContainer class="resource-monitor-container">
    <el-tabs v-model="activeTab" class="tabs" @tab-click="reset()">
      <el-tab-pane label="集群监控" name="ClusterIndex" />
      <el-tab-pane label="节点监控" name="NodeIndex" />
      <el-tab-pane label="容器组监控" name="ContainerIndex" />
      <el-tab-pane label="服务监控" name="ServiceIndex" />
    </el-tabs>
    <div class="wrapper">
      <!-- 集群监控 -->
      <ClusterIndex v-if="activeTab === 'ClusterIndex'" />
      <!-- 节点监控 -->
      <NodeIndex v-if="activeTab === 'NodeIndex'" @getContainer="getContainer" />
      <!-- 容器组监控 -->
      <ContainerIndex v-if="activeTab === 'ContainerIndex'" :search-params="searchParams" />
      <!-- 服务监控 -->
      <ServiceIndex v-if="activeTab === 'ServiceIndex'" />
    </div>
  </MyContainer>

</template>

<script>
import MyContainer from '@/components/Layout/MyContainer.vue'
import ClusterIndex from './components/ClusterIndex' // 集群监控
import NodeIndex from './components/NodeIndex' // 节点监控
import ContainerIndex from './components/ContainerIndex' // 容器组监控
import ServiceIndex from './components/ServiceIndex' // 服务监控
export default {
  name: 'ResourceMonitor',
  components: {
    MyContainer, ClusterIndex, NodeIndex, ContainerIndex, ServiceIndex
  },
  data() {
    return {
      activeTab: 'ClusterIndex',
      searchParams: {
        category: '',
        cluster: '',
        node: ''
      }
    }
  },
  computed: {},
  created() {
    if (this.$route.query.activeTab) {
      this.activeTab = this.$route.query.activeTab
    } else {
      this.activeTab = 'ClusterIndex'
    }
  },
  methods: {
    getContainer(searchParams) {
      this.searchParams = searchParams
      this.activeTab = 'ContainerIndex'
    },
    reset() {
      this.searchParams = {
        category: '',
        cluster: '',
        node: ''
      }
    }
  }
}
</script>

<style lang="less" scoped>
@import "@/assets/css/common.less";
.resource-monitor-container {
  margin: 20px;
  width: auto;
  height: calc(100vh - 90px);
  padding: 10px 25px 20px;
    .wrapper {
    height: calc(100vh - 186px);
    overflow-y: auto;
  }

  .tabs {
    /deep/ .el-tabs__header {
      margin-bottom: 20px;
    }
    /deep/ .el-tabs__item {
      height: 46px;
      line-height: 46px;
      font-weight: 500;
    }
  }
}
</style>
